
<template>
  <div class="wrap" style="padding: 15px">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="日期查询">
          <!-- <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
          >
          </el-date-picker> -->
          <el-date-picker
            value-format="yyyyMMdd"
            v-model="queryParams.createDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column label="日期" prop="createDate"></el-table-column>

      <el-table-column label="预订收款金额" prop="payAmount"></el-table-column>
      <el-table-column label="充值金额" prop="rechargeAmount"></el-table-column>
      <el-table-column
        label="赠送红包金额"
        prop="redPackedAmount"
      ></el-table-column>
      <el-table-column label="微信收款" prop="wxAmount"></el-table-column>
      <el-table-column label="支付宝收款" prop="zliAmount"></el-table-column>
      <el-table-column
        label="余额收款"
        prop="memberPayAmount"
      ></el-table-column>
      <el-table-column label="现金收款" prop="cashAmount"></el-table-column>
      <el-table-column
        label="礼品卡收款金额"
        prop="giftAmount"
      ></el-table-column>
      <el-table-column
        label="红包消费金额统计"
        prop="orderRedPackedAmount"
      ></el-table-column>
      <el-table-column label="银联收款金额" prop="ylAmount"></el-table-column>
    </el-table>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="getData"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>

import { cpbillPage } from '@/config/api'
import { divide } from "@/utils/tools"

export default {
  components: {
  },
  data () {
    return {
      date: [],
      queryParams: {
        startTimeStr: undefined,
        endTimeStr: undefined,
        createDate: undefined,
        page: 1,
        pageSize: 10,
      },
      tableData: [
      ],
      total: 0,
      loading: false,

    };
  },

  created () {
    this.getData()
  },
  methods: {
    getDate (e) {
      this.queryParams.startTimeStr = e[0]
      this.queryParams.endTimeStr = e[1]
    },
    add () {
      this.$refs.detail.show()
    },
    getData () {
      cpbillPage(this.queryParams).then(res => {
        res.data.result.list.map(item => {
          item.payAmount = divide(item.payAmount, 100)
          item.rechargeAmount = divide(item.rechargeAmount, 100)
          item.redPackedAmount = divide(item.redPackedAmount, 100)
          item.wxAmount = divide(item.wxAmount, 100)
          item.zliAmount = divide(item.zliAmount, 100)
          item.memberPayAmount = divide(item.memberPayAmount, 100)
          item.cashAmount = divide(item.cashAmount, 100)
          item.giftAmount = divide(item.giftAmount, 100)
          item.ylAmount = divide(item.ylAmount, 100)
          item.orderRedPackedAmount = divide(item.orderRedPackedAmount, 100)
        })
        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },
  },
};
</script>
